import { useState, useMemo, createContext } from 'react'
import TodoHead from './components/TodoHead'
import TodoList from './components/TodoList'
import TodoTab from './components/TodoTab'
import { TodoArr ,ContextD} from './Impl/TodoImp'
import {MoneyContext} from './context/MoneyContext'

function App() {
  let [todoArray, setTodoArray] = useState<TodoArr>([{
    id: 1, text: "学习ts", done: false
  }]);
  let [id, setID] = useState<number>(2);
  let addItem = (str: string) => {
    setTodoArray([...todoArray, {
      id: id,
      text: str,
      done: false
    }]);
    setID(id + 1);
  }
  let [status, setStatus] = useState<number>(1);//1 全部 2 已完成 3 未完成
  // setStatus(1+3)
  let fiterArray = useMemo(() => {
    switch (status) {
      case 2:
        return todoArray.filter(d => d.done);
      case 3:
        return todoArray.filter(d => !d.done);
      default:
        return todoArray;
    }
  }, [status, todoArray]);
  let [money,setMoney]=useState("一块钱")
  return (
    // Context跨组件传值
    <MoneyContext.Provider value={
        {
          money:money, 
          addMoney: (m: string)=>{ setMoney(m) }
        }
      }>
      <div id="todo">
        <TodoHead additem={addItem} ></TodoHead>
        <TodoTab todoarray={todoArray} status={status} setStatus={setStatus}></TodoTab>
        <TodoList setTodoArray={setTodoArray} todoarray={fiterArray}></TodoList>
      </div>
    </MoneyContext.Provider>
  )
}

export default App;
